<!-- 河湖档案列表 -->
<template>
  <div class="page">
    <div v-wechat-title="$route.meta.title=riverInfo.name"></div>
      <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
              <label for="" class="weui-label">查看项</label>
            </div>
            <div class="weui-cell__bd">
              <select class="weui-select" id="select1">
                <option selected value="riverInfo">河道名录</option>
                <option value="drainOutlet">排污口</option>
                <!-- <option value="污染源">污染源</option> -->
                <option value="pumpGate">泵闸信息</option>
                <option value="station">测站信息</option>
                <option value="waterFunction">水功能区信息</option>
                <option value="intakeInfo">取水口信息</option>
                <option value="sewageTreatment">污水处理设施</option>
                <option value="waterShoreline">岸线利用</option>
                <option value="billboard">河长公示牌</option>
              </select>
            </div>
          </div>
      </div>
    <div class="">
      <!-- 河道名录 -->
      <div class="weui-form__control-area" id="riverInfo">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">河道名称</label></div>
              <div class="weui-cell__bd" v-text="riverInfo.name"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">河长</label></div>
              <div class="weui-cell__bd" v-text="riverInfo.principalName"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">河道起点</label></div>
              <div class="weui-cell__bd" v-text="riverInfo.startAddr"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">河流终点</label></div>
              <div class="weui-cell__bd" v-text="riverInfo.endAddr"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">河流长度(km)</label></div>
              <div class="weui-cell__bd" v-text="riverInfo.lengths"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">河流宽度(m)</label></div>
              <div class="weui-cell__bd" v-text="riverInfo.width"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">水域面积(万方)</label></div>
              <div class="weui-cell__bd" v-text="riverInfo.acreage"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">河流等级</label></div>
              <div class="weui-cell__bd" v-text="riverInfo.level"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">图片</label></div>
              <div class="weui-cell__bd">
                <img :src="riverInfo.imgPath" alt=""
                     style="width: 100px;height: 130px; margin-right: 16px; display: block;">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 排污口 -->
      <div class="weui-form__control-area" id="drainOutlet" style="display:none">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd">
                <label class="weui-label">排污口名称</label>
              </div>
              <div class="weui-cell__bd">
                <select id="drainOutletId" class="weui-select">
                  <option>请选择...</option>
                  <option v-if="drainOutlets != null && drainOutlets.length > 0"
                          v-for="(obj, index) in drainOutlets" :value="obj.id">{{obj.name}}
                  </option>
                </select>
              </div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">排污口编号</label></div>
              <div class="weui-cell__bd" v-text="drainOutletInfo.code"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">入河方式</label></div>
              <div class="weui-cell__bd">
                <span v-if="drainOutletInfo.inRiverType == 1">沟</span>
                <span v-else-if="drainOutletInfo.inRiverType == 2">渠</span>
                <span v-else-if="drainOutletInfo.inRiverType == 3">管道</span>
                <span v-else="drainOutletInfo.inRiverType == 4">其他</span>
              </div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">所在位置</label></div>
              <div class="weui-cell__bd" v-text="drainOutletInfo.address"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">规划管理单位</label></div>
              <div class="weui-cell__bd" v-text="drainOutletInfo.manageCompany"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">行政区划</label></div>
              <div class="weui-cell__bd" v-text="drainOutletInfo.areaNames"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">所在经度</label></div>
              <div class="weui-cell__bd" v-text="drainOutletInfo.longitude"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">所在纬度</label></div>
              <div class="weui-cell__bd" v-text="drainOutletInfo.latitude"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 泵闸信息 -->
      <div class="weui-form__control-area" id="pumpGate" style="display:none">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd">
                <label class="weui-label">站点名称</label>
              </div>
              <div class="weui-cell__bd">
                <select id="pumpGateId" class="weui-select">
                  <option>请选择...</option>
                  <option v-if="pumpGates != null && pumpGates.length > 0"
                          v-for="(obj, index) in pumpGates" :value="obj.id">{{obj.name}}
                  </option>
                </select>
              </div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">站点编码</label></div>
              <div class="weui-cell__bd" v-text="pumpGateInfo.code"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">行政区划</label></div>
              <div class="weui-cell__bd" v-text="riverInfo.areaNames"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">类型</label></div>
              <div class="weui-cell__bd" v-text="pumpGateInfo.type"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">经度</label></div>
              <div class="weui-cell__bd" v-text="pumpGateInfo.longitude"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">纬度</label></div>
              <div class="weui-cell__bd" v-text="pumpGateInfo.latitude"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">建成时间</label></div>
              <div class="weui-cell__bd" v-text="pumpGateInfo.completionTime"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">工程等级</label></div>
              <div class="weui-cell__bd" v-text="pumpGateInfo.engineeringLevel"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">建筑物等级</label></div>
              <div class="weui-cell__bd" v-text="pumpGateInfo.buildingLevel"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">闸门/水泵数量</label></div>
              <div class="weui-cell__bd" v-text="pumpGateInfo.pumpsNumber"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">节制闸过闸流量/装机流量(m/s)</label></div>
              <div class="weui-cell__bd" v-text="pumpGateInfo.sluiceFlow"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">闸门总净宽/设计扬程(m)</label></div>
              <div class="weui-cell__bd" v-text="pumpGateInfo.gateWidth"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">装机功率(kw)</label></div>
              <div class="weui-cell__bd" v-text="pumpGateInfo.installedPower"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">水闸管理单位名称</label></div>
              <div class="weui-cell__bd" v-text="pumpGateInfo.management"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">所在位置</label></div>
              <div class="weui-cell__bd" v-text="pumpGateInfo.siteAddress"></div>
            </div>
          </div>
        </div>
      </div>



      <!-- 测站信息 -->
      <div class="weui-form__control-area" id="station" style="display:none">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd">
                <label class="weui-label">测站名称</label>
              </div>
              <div class="weui-cell__bd">
                <select id="stationId" class="weui-select">
                  <option>请选择...</option>
                  <option v-if="stations != null && stations.length > 0"
                          v-for="(obj, index) in stations" :value="obj.id">{{obj.name}}
                  </option>
                </select>
              </div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">测站类型</label></div>
              <div class="weui-cell__bd" v-text="stationInfo.type"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">站点地址</label></div>
              <div class="weui-cell__bd" v-text="stationInfo.address"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">行政区划</label></div>
              <div class="weui-cell__bd" v-text="riverInfo.areaNames"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">经度</label></div>
              <div class="weui-cell__bd" v-text="stationInfo.longitude"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">纬度</label></div>
              <div class="weui-cell__bd" v-text="stationInfo.latitude"></div>
            </div>
          </div>
        </div>
      </div>


      <!-- 水功能区信息 -->
      <div class="weui-form__control-area" id="waterFunction" style="display:none">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd">
                <label class="weui-label">水功能区编号</label>
              </div>
              <div class="weui-cell__bd">
                <select id="waterFunctionId" class="weui-select">
                  <option>请选择...</option>
                  <option v-if="waterFunctions != null && waterFunctions.length > 0"
                          v-for="(obj, index) in waterFunctions" :value="obj.id">{{obj.waterFuncAreaCode}}
                  </option>
                </select>
              </div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">起点经度</label></div>
              <div class="weui-cell__bd" v-text="waterFunctionInfo.startLon"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">起点纬度</label></div>
              <div class="weui-cell__bd" v-text="waterFunctionInfo.startLat"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">终点经度</label></div>
              <div class="weui-cell__bd" v-text="waterFunctionInfo.endLon"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">终点纬度</label></div>
              <div class="weui-cell__bd" v-text="waterFunctionInfo.endLat"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">责任单位</label></div>
              <div class="weui-cell__bd" v-text="waterFunctionInfo.responsibleDept"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>
              <div class="weui-cell__bd" v-text="waterFunctionInfo.phoneNumber"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">归口管理单位</label></div>
              <div class="weui-cell__bd" v-text="waterFunctionInfo.gkManagementDept"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">行政区划</label></div>
              <div class="weui-cell__bd" v-text="riverInfo.areaNames"></div>
            </div>
          </div>
        </div>
      </div>


      <!-- 取水口信息 -->
      <div class="weui-form__control-area" id="intakeInfo" style="display:none">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd">
                <label class="weui-label">取水口名称</label>
              </div>
              <div class="weui-cell__bd">
                <select id="intakeId" class="weui-select">
                  <option>请选择...</option>
                  <option v-if="intakes != null && intakes.length > 0"
                          v-for="(obj, index) in intakes" :value="obj.id">{{obj.name}}
                  </option>
                </select>
              </div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">取水口编码</label></div>
              <div class="weui-cell__bd" v-text="intakeInfo.code"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">取水许可证编码</label></div>
              <div class="weui-cell__bd" v-text="intakeInfo.licenceCode"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">行业类别</label></div>
              <div class="weui-cell__bd" v-text="intakeInfo.industryType"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">取水用途</label></div>
              <div class="weui-cell__bd" v-text="intakeInfo.purpose"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">取水方式</label></div>
              <div class="weui-cell__bd" v-text="intakeInfo.way"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">取水能力(吨)</label></div>
              <div class="weui-cell__bd" v-text="intakeInfo.totalIntake"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">所在位置</label></div>
              <div class="weui-cell__bd" v-text="intakeInfo.address"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">经度</label></div>
              <div class="weui-cell__bd" v-text="intakeInfo.longitude"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">纬度</label></div>
              <div class="weui-cell__bd" v-text="intakeInfo.latitude"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">取水单位</label></div>
              <div class="weui-cell__bd" v-text="intakeInfo.unit"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">取水单位责任人</label></div>
              <div class="weui-cell__bd" v-text="intakeInfo.principal"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>
              <div class="weui-cell__bd" v-text="intakeInfo.phone"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">归口管理单位</label></div>
              <div class="weui-cell__bd" v-text="intakeInfo.manageCompany"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">许可取水量(万m³)</label></div>
              <div class="weui-cell__bd" v-text="intakeInfo.allowQuantity"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">年取水量(万m³)</label></div>
              <div class="weui-cell__bd" v-text="intakeInfo.yearQuantity"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">行政区划</label></div>
              <div class="weui-cell__bd" v-text="riverInfo.areaNames"></div>
            </div>
          </div>
        </div>
      </div>



      <!-- 污水处理设施 -->
      <div class="weui-form__control-area" id="sewageTreatment" style="display:none">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd">
                <label class="weui-label">设施名称</label>
              </div>
              <div class="weui-cell__bd">
                <select id="sewageTreatmentId" class="weui-select">
                  <option>请选择...</option>
                  <option v-if="sewageTreatments != null && sewageTreatments.length > 0"
                          v-for="(obj, index) in sewageTreatments" :value="obj.id">{{obj.name}}
                  </option>
                </select>
              </div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">登记编码</label></div>
              <div class="weui-cell__bd" v-text="sewageTreatmentInfo.code"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">投运时间</label></div>
              <div class="weui-cell__bd" v-text="sewageTreatmentInfo.startDate"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">设计处理能力(亿m³/日)</label></div>
              <div class="weui-cell__bd" v-text="sewageTreatmentInfo.processCapacity"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">处理工艺</label></div>
              <div class="weui-cell__bd" v-text="sewageTreatmentInfo.technology"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">所在位置</label></div>
              <div class="weui-cell__bd" v-text="sewageTreatmentInfo.address"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">起点经度</label></div>
              <div class="weui-cell__bd" v-text="sewageTreatmentInfo.longitude"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">起点纬度</label></div>
              <div class="weui-cell__bd" v-text="sewageTreatmentInfo.latitude"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">责任单位</label></div>
              <div class="weui-cell__bd" v-text="sewageTreatmentInfo.responsibleAgency"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">责任人</label></div>
              <div class="weui-cell__bd" v-text="sewageTreatmentInfo.principal"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>
              <div class="weui-cell__bd" v-text="sewageTreatmentInfo.phone"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">归口管理单位</label></div>
              <div class="weui-cell__bd" v-text="sewageTreatmentInfo.manageCompany"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">行政区划</label></div>
              <div class="weui-cell__bd" v-text="sewageTreatmentInfo.areaNames"></div>
            </div>
          </div>
        </div>
      </div>



      <!-- 岸线利用 -->
      <div class="weui-form__control-area" id="waterShoreline" style="display:none">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd">
                <label class="weui-label">岸线编码</label>
              </div>
              <div class="weui-cell__bd">
                <select id="waterShorelineId" class="weui-select">
                  <option>请选择...</option>
                  <option v-if="waterShorelines != null && waterShorelines.length > 0"
                          v-for="(obj, index) in waterShorelines" :value="obj.id">{{obj.shorelineCode}}
                  </option>
                </select>
              </div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">河流岸别</label></div>
              <div class="weui-cell__bd" v-text="waterShorelineInfo.riverBank"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">岸线长度</label></div>
              <div class="weui-cell__bd" v-text="waterShorelineInfo.shorelineLength"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">利用规划类别</label></div>
              <div class="weui-cell__bd" v-text="waterShorelineInfo.planningType"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">起点位置名称</label></div>
              <div class="weui-cell__bd" v-text="waterShorelineInfo.startAddr"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">终点位置名称</label></div>
              <div class="weui-cell__bd" v-text="waterShorelineInfo.endAddr"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">起点经度</label></div>
              <div class="weui-cell__bd" v-text="waterShorelineInfo.startLon"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">起点纬度</label></div>
              <div class="weui-cell__bd" v-text="waterShorelineInfo.startLat"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">终点经度</label></div>
              <div class="weui-cell__bd" v-text="waterShorelineInfo.endLon"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">终点纬度</label></div>
              <div class="weui-cell__bd" v-text="waterShorelineInfo.endLat"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">归口管理单位</label></div>
              <div class="weui-cell__bd" v-text="waterShorelineInfo.gkManagementDept"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">目前状态</label></div>
              <div class="weui-cell__bd" v-text="waterShorelineInfo.currentState"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">行政区划</label></div>
              <div class="weui-cell__bd" v-text="riverInfo.areaNames"></div>
            </div>
          </div>
        </div>
      </div>



      <!-- 河长公示牌 -->
      <div class="weui-form__control-area" id="billboard" style="display:none">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd">
                <label class="weui-label">公示牌编码</label>
              </div>
              <div class="weui-cell__bd">
                <select id="billboardId" class="weui-select">
                  <option>请选择...</option>
                  <option v-if="billboards != null && billboards.length > 0"
                          v-for="(obj, index) in billboards" :value="obj.id">{{obj.code}}
                  </option>
                </select>
              </div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">所在位置</label></div>
              <div class="weui-cell__bd" v-text="billboardInfo.address"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">所在经度</label></div>
              <div class="weui-cell__bd" v-text="billboardInfo.longitude"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">所在纬度</label></div>
              <div class="weui-cell__bd" v-text="billboardInfo.latitude"></div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">图片</label></div>
              <div class="weui-cell__bd">
                <img :src="billboardInfo.imgUrl" alt=""
                     style="width: 100px;height: 130px; margin-right: 16px; display: block;">
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script type="text/javascript">
  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import {apiPath} from '@/assets/js/boss'
  import 'weui'

  export default {
    data() {
      return {
        riverId: null,
        riverInfo: {},
        drainOutlets: [], // 排污口列表
        drainOutletInfo: {}, // 排污口详情
        intakes: [], // 取水口列表
        intakeInfo: {}, // 取水口详情
        sewageTreatments: [], // 污水处理列表
        sewageTreatmentInfo: {}, // 污水处理详情
        billboards: [], // 河长公示牌列表
        billboardInfo: {}, // 河长公示牌详情
        waterShorelines: [], // 水域岸线列表
        waterShorelineInfo: {}, // 水域岸线详情
        pumpGates: [], // 泵闸信息列表
        pumpGateInfo: {}, // 泵闸信息详情
        stations: [], // 测站信息列表
        stationInfo: {}, // 测站信息详情
        waterFunctions: [], // 水功能区信息列表
        waterFunctionInfo: {} // 水功能区信息详情
      }
    },
    mounted() {
      let that = this;
      that.riverId = this.$route.query.id;
      that.getRiverInfo(that.riverId);

      $('#select1').on('change', function () {
        $('.weui-form__control-area').hide();
        $('#' + $(this).val()).show();
        that.loadList($(this).val(), that.riverId);
      });

      $('#drainOutletId').change(function () {
        that.getInfo('drainOutlets', 'drainOutletInfo', $(this).val());
      });

      $('#intakeId').change(function () {
        that.getInfo('intakes', 'intakeInfo', $(this).val());
      });
      $('#sewageTreatmentId').change(function () {
        that.getInfo('sewageTreatments', 'sewageTreatmentInfo', $(this).val());
      });
      $('#billboardId').change(function () {
        that.getInfo('billboards', 'billboardInfo', $(this).val());
      });
      $('#waterShorelineId').change(function () {
        that.getInfo('waterShorelines', 'waterShorelineInfo', $(this).val());
      });
      $('#pumpGateId').change(function () {
        that.getInfo('pumpGates', 'pumpGateInfo', $(this).val());
      });
      $('#stationId').change(function () {
        that.getInfo('stations', 'stationInfo', $(this).val());
      });
      $('#waterFunctionId').change(function () {
        that.getInfo('waterFunctions', 'waterFunctionInfo', $(this).val());
      });
    },
    methods: {
      getRiverInfo(id) {
        let that = this;
        axios.get(apiPath + '/api/river/riverInfo/riverInfo/' + id, {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.riverInfo = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      getInfo(listObj, infoObj, id) { // 根据ID获取详细信息
        let that = this;
        for (let i in that[listObj]) {
          let obj = that[listObj][i];
          if (obj.id === id) {
            that[infoObj] = obj;
            break;
          }
        }
      },
      loadList(itemId, riverId) { // 判断当前tab，加载列表数据
        let that = this;
        let apiUrl = apiPath + '/api/river/riverInfo/';
        if (itemId === 'riverInfo') { // 河道名录
          return;
        }
        if (itemId === 'drainOutlet') { // 排污口
          if (that.drainOutlets && that.drainOutlets.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(apiUrl + 'drainOutletList/' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.drainOutlets = result.data;
            } else {
              alert(result.message);
            }
          })
        }
        if (itemId === 'pumpGate') { // 泵闸信息
          if (that.pumpGates && that.pumpGates.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(apiUrl + 'pumpGateList/' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.pumpGates = result.data;
            } else {
              alert(result.message);
            }
          })
        }
        if (itemId === 'station') { // 测站信息
          if (that.stations && that.stations.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(apiUrl + 'stationList/' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.stations = result.data;
            } else {
              alert(result.message);
            }
          })
        }
        if (itemId === 'waterFunction') { // 水功能区信息
          if (that.waterFunctions && that.waterFunctions.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(apiUrl + 'waterFunctionInfoList/' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.waterFunctions = result.data;
            } else {
              alert(result.message);
            }
          })
        }
        if (itemId === 'intakeInfo') { // 取水口信息
          if (that.intakes && that.intakes.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(apiUrl + 'intakeInfoList/' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.intakes = result.data;
            } else {
              alert(result.message);
            }
          })
        }
        if (itemId === 'sewageTreatment') { // 污水处理设施
          if (that.sewageTreatments && that.sewageTreatments.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(apiUrl + 'sewageTreatmentsList/' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.sewageTreatments = result.data;
            } else {
              alert(result.message);
            }
          })
        }
        if (itemId === 'waterShoreline') { // 岸线利用
          if (that.waterShorelines && that.waterShorelines.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(apiUrl + 'waterShorelineList/' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.waterShorelines = result.data;
            } else {
              alert(result.message);
            }
          })
        }
        if (itemId === 'billboard') { // 河长公示牌
          if (that.billboards && that.billboards.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(apiUrl + 'riverBillboardList/' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.billboards = result.data;
            } else {
              alert(result.message);
            }
          })
        }
      }
    }
  }
</script>
